<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>home</title>
  <%--  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/home.js"></script>
    <style>
        .zl_search{width: 1000px;margin: 7.5px auto;height: 25px;line-height: 25px;}
        .zl_container{height: 40px;border: 1px solid #333;opacity: 0.5}
    </style>
</head>
<%--onload="test2()"--%>
<body >
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand">one平台</a>
        </div>
        <ul class="nav nav-tabs">
            <li  class="active"><a href="#home" data-toggle="tab">首页</a></li>
            <li><a href="#order" data-toggle="tab">订单</a></li>
            <li><a href="#publish" data-toggle="tab">发布</a> </li>
            <li><a href="#msg" data-toggle="tab">消息</a> </li>
            <li><a href="#myself" data-toggle="tab">我的</a> </li>
            <li><a href="#sys" data-toggle="tab">系统后台</a> </li>
        </ul>
    </nav>
    <div  class="tab-content">
        <%--首页--%>
    <div  class="tab-pane fade in active "  id="home" style="z-index: 0">
        <div class="container zl_container" style="position: fixed;z-index: 1;width:100%;background-color: white">
            <h4 style="color: black ;display: inline-block;text-align: center"class="col-md-2 col-sm-2;">郑州</h4>
            <div class="zl_search" style="background-color:#DCE1E1;border: 2px solid #DCE1E1;border-radius: 6px 6px 6px 6px;">点击搜索</div>
        </div>
        <div id="homeCarousel" class="carousel slide" style="height:50%">
            <ol class="carousel-indicators" id="bannerlist_indicators">
            </ol>
            <div class="carousel-inner" id="bannerlist">
            </div>

            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#homeCarousel"
               data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#homeCarousel"
               data-slide="next">&rsaquo;</a>
        </div>
        <div>
            <ul style="margin-top: 4%">
                <li style="list-style-type:none;">
                    <div style="display: inline-block;">
                        <div style="text-align: center;margin-left: 8%">
                            <img src="/images/icon_flb.png">
                            <p>运动健身</p>
                        </div>
                    </div>
                    <div style="display: inline-block;">
                        <div style="text-align: center;margin-left: 16%">
                            <img src="/images/icon_flc.png">
                            <p>hahah</p>
                        </div>
                    </div>
                </li>
                <li style="list-style-type:none;">
                    <div style="display: inline-block;">
                        <div style="text-align: center;margin-left: 8%">
                            <img src="/images/icon_fld.png">
                            <p>wata</p>
                        </div>
                    </div>
                    <div style="display: inline-block;">
                        <div style="text-align: center;margin-left: 16%">
                            <img src="/images/icon_fle.png">
                            <p>yyyy</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div style="width: 100%;height:4px;background-color: #9d9d9d"></div>
        <div class="container">
            <div class="col-md-6 col-xs-6" style="margin-left: 0px">
                <h3>附近正在接单的人</h3>
                <h2>赶快去看看</h2>
            </div>
           <div class="col-md-6 col-xs-6">
               <img src="/images/icon_flb.png" style="width: 88px;height:88px">
               <img src="/images/icon_flb.png" style="width: 88px;height:88px;display: inline-block;margin-left: -44px">
               <img src="/images/icon_flb.png" style="width: 88px;height:88px;display: inline-block;margin-left: -44px">
           </div>
        </div>
        <div style="width: 100%;height:4px;background-color: #9d9d9d"></div>
        <div>
            <h2 style="display: inline-block">我的关注</h2>
            <img src="/images/arrow_right.png" style="display: inline-block ;float: right;" >
        </div>
        <div id="list1"></div>
    </div>
            <%--订单--%>
    <div   class="tab-pane fade"  id="order">
        <div class="container" style="width: 100%;">
            <h3 class="text-center">我的订单</h3>
            <div style="background-color: #9d9d9d;height: 1px"></div>
            <div class="row"style="height: 32px">
                <h4 class="col-xs-6" style="height: 32px ">消费订单</h4>
                <div class="col-xs-6 text-right" style="height: 32px">
                    <p style="display: inline-block;position: relative;top:50%; transform: translateY(-50%)">全部订单</p>
                    <img style="display: inline-block;width: 16px;height: 16px;margin-top: 8px" src="/images/icon_jiantouyou.png" >
                </div>
            </div>
            <div style="background-color: #9d9d9d;height: 1px"></div>
            <div class="row">
            </div>

            <div class="row">
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gyweijieshou.png">
                <h4 >未接受</h4>
                 </div>
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gyjieshou.png">
                    <h4 >已接受</h4>
                </div>
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gypingjia.png">
                    <h4 >待评价</h4>
                </div>

            </div>
            <div style="background-color: #9d9d9d;height: 4px"></div>
            <div class="row"></div>
            <div class="row" style="height: 36px">
                <h4 class="col-xs-3">我的兼职订单</h4>
                <div class="col-xs-6"></div>
                <div class="col-xs-3 text-right" style="height: 36px">
                    <p style="display: inline-block;;position: relative;top:50%; transform: translateY(-50%)">全部订单</p>
                    <img src="/images/icon_jiantouyou.png" style="display: inline-block;width: 16px;height: 16px;margin-top: 10px">
                </div>
            </div>

            <div style="background-color:#9d9d9d ;height: 1px"></div>
            <div class="row"></div>
            <div class="row">
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gyweijieshou.png">
                    <h4 >未接受</h4>
                </div>
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gyjieshou.png">
                    <h4 >已接受</h4>
                </div>
                <div class="col-xs-4 col-md-4 text-center">
                    <img src="/images/icon_gypingjia.png">
                    <h4 >待评价</h4>
                </div>

            </div>
            <div style="background-color: #9d9d9d;height: 1px"></div>
            <h4>最近订单</h4>
            <div style="height: 1px;background-color: #9d9d9d"></div>
            <div id="lately_list">
            </div>
        </div>
    </div>
            <%--发布--%>
    <div class="tab-pane fade "  id="publish">
        <iframe name="toppage" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0"  src="html/pubulish_home.html" ></iframe>
        <%--<p>图片信息</p>--%>
     <%--   <jsp:include page="publish_home.html"></jsp:include>--%>
    </div>
        <div   class="tab-pane fade"  id="msg">
           <iframe name="msg" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0" src="html/msg_home.html"></iframe>
        </div>
        <div class="tab-pane fade"  id="myself">
            <div class="container" style="width: 100%">
                <div style="width:100%;height:240px;;position: relative;
                background-image: url('/images/icon_wdbeijing.png');background-size: 100% 100%">
                    <h4 style="text-align: center;padding-top: 8px">个人中心</h4>
                    <img src="/images/icon_wdshezhi.png" style="float: right;width: 56px;height: 56px;position: absolute;right: 0;margin-right: 16px">
                    <div style="position:absolute;top: 76px;display: flex;justify-content: center ;width: 100%">
                        <img src="/images/icon_zhucenvshen.png" style="width: 88px ;height: 88px;">
                    </div>
                    <div style="position: absolute ;bottom: 0;width: 100%">
                        <p style="text-align: center;margin-bottom: 2px">name</p>
                        <p style="text-align: center;margin-bottom: 2px">签名</p>
                        <div style="text-align: center;margin-bottom: 2px;height: 26px">
                            <div style="float: left; display: inline-block">
                                <p style="display: inline-block">账户金额：</p>
                                <p style="color: red;display: inline-block">￥123.00</p>
                            </div>
                            <div style="text-align: center;display: inline">
                                <p style="display: inline-block">账户金额：</p>
                                <p style="color: red;display: inline-block">￥123.00</p>
                            </div>
                            <div style="float: right ;display: inline-block">
                                <p style="display: inline-block">账户金额：</p>
                                <p style="color: red;display: inline-block">￥123.00</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 6px;background-color: #9d9d9d"></div>
               <div style="text-align: center;height: 80px">
                   <div style="float: left;display: inline-block;height: 80px;display: flex;align-items: center" >
                       <img src="/images/icon_wdqianbao.png" style="display: inline-block">
                       <div style="display: inline-block;">
                           <h4>我的钱包</h4>
                           <p>收支金额，推广金额</p>
                       </div>
                   </div>
                   <div style="display: inline-block;;height: 80px;border-left: 2px solid #9d9d9d9d;">
                       <div style="height: 80px;display: flex;align-items: center">
                           <img src="/images/icon_wdqianbao.png" >
                           <div style="display: inline-block">
                               <h4>我的钱包</h4>
                               <p>收支金额，推广金额</p>
                           </div>
                       </div>
                   </div>
               </div>
                <div style="height: 2px;background-color: #9d9d9d"></div>
                <div style="text-align: center;height: 80px">
                    <div style="float: left;display: inline-block;height: 80px;display: flex;align-items: center" >
                        <img src="/images/icon_wdqianbao.png" style="display: inline-block">
                        <div style="display: inline-block;">
                            <h4>我的钱包</h4>
                            <p>收支金额，推广金额</p>
                        </div>
                    </div>
                    <div style="display: inline-block;;height: 80px;border-left: 2px solid #9d9d9d9d;">
                        <div style="height: 80px;display: flex;align-items: center">
                            <img src="/images/icon_wdqianbao.png" >
                            <div style="display: inline-block">
                                <h4>我的钱包</h4>
                                <p>收支金额，推广金额</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 6px;background-color: #9d9d9d"></div>
                <div style="border-bottom: solid cadetblue 2px;">
                    <img src="/images/icon_wdqianbao.png" style="display: inline-block;">
                    <p style="display: inline-block;">客服中心</p>
                    <img src="/images/icon_jiantouyou.png" style="float: right;display: inline-block">
                </div>
                <div style="border-bottom: solid cadetblue 2px;">
                    <img src="/images/icon_wdqianbao.png" style="display: inline-block;">
                    <p style="display: inline-block;">客服中心</p>
                    <img src="/images/icon_jiantouyou.png" style="float: right;display: inline-block">
                </div>
                <div style="border-bottom: solid cadetblue 2px;">
                    <img src="/images/icon_wdqianbao.png" style="display: inline-block;">
                    <p style="display: inline-block;">客服中心</p>
                    <img src="/images/icon_jiantouyou.png" style="float: right;display: inline-block">
                </div>
                <div style="border-bottom: solid cadetblue 2px;">
                    <img src="/images/icon_wdqianbao.png" style="display: inline-block;">
                    <p style="display: inline-block;">客服中心</p>
                    <img src="/images/icon_jiantouyou.png" style="float: right;display: inline-block">
                </div>
                <div style="height: 6px;background-color: #9d9d9d"></div>
                <p style="text-align: center;font-size: 16px;margin: 32px;border: solid #9d9d9d9d 2px;padding: 16px">退出登录</p>
            </div>
        </div>
        <div class="tab-pane fade" id="sys">
            <iframe name="sys" width=100% height=100% marginwidth=0 marginheight=0 frameborder="no" border="0" src="html/sys/home.html"></iframe>
        </div>
    </div>
</body>
    <script>
        var list1=document.getElementById("list1");
        var str="";
        for(var i=0;i<6;i++){
//            str=str+"<p style='color: #c7254e'>"+i+"dfsdf</p>";
            str=str+"<div style='background-color: #9d9d9d ;height: 1px'></div> " +
                "<div><img src='/images/icon_flb.png' style='width: 56px;height: 56px;display: inline-block'>" +
                "<div style='display: inline-block'> " +
                "<p style='display: inline-block'>name</p>" +
                " <p style='display: inline-block;color: #c7254e'>在线可接单</p> " +
                "<div> <div style='background-color: #2b669a;text-align: center'> " +
                "<img src='/images/icon_nansheng.png' style='display: inline-block'>" +
                " <p style='display: inline-block;color: snow'>22</p>" +
                "</div> </div> </div> </div>";
        }
        list1.innerHTML=str;
        var lately_list=document.getElementById("lately_list");
        var lately_str="";
        for(var i=0;i<5;i++){
            lately_str=lately_str+"<div style=' height: 75px;position: relative;margin-top: 4px;margin-bottom: 4px' > " +
                "<div style='display: inline-block'> " +
                "<div style='display: flex; flex-direction: row;flex-wrap: wrap;'> " +
                "<div style='background-color: deepskyblue;width: 8px;height:75px ;'>" +
                "</div> " +
                "<img style=' width: 75px;' src='/images/icon_gyweijieshou.png' >" +
                " </div>" +
                " </div> <div style='display:inline-block;height: 75px;margin-left: 16px'> " +
                "<div >" +
                " <p style='text-align: left'>我的接单：服装设计师</p> " +
                "</div> <div> <p style='display: inline-block'>下单人：约神客服</p> " +
                "<p style='margin-left: 8px;display: inline-block'>1513616565</p> " +
                "<img style='margin-left: 8px;display: inline-block;width: 20px;height: 20px' src='/images/icon_shoupindianhua.png'> " +
                "</div> <p>下单时间：2018.2.6</p> </div> " +
                "<p style='color: #ff331e;position: absolute;right: 0;display: inline-block'>已完成</p></div>"+
            "<div style='height: 1px;background-color: #9d9d9d''></div>";
        }
        lately_list.innerHTML=lately_str;
//      首页轮播图
        $(function () {
            $.ajax({
                type:"GET",
                url:"http://localhost:8080/banners",
                dataType:"json",
                success:function (data) {
                    var listStr="";
                    var listInd="";
                    var lists=eval(data);
                    $.each(lists,function (index ){
                        var img=lists[index].ad_image;
                        if(index==0){
                            listInd=listInd+"<li data-target='homeCarousel' data-slide-to='"+index+"'class='active'></li>";
                            listStr="<div class='item active' > <img src='" +
                                img +
                                "' alt='" +index+
                                "a tu' style='height: 100%;margin-right: auto;margin-left: auto;'> </div>"+listStr;
                        }else{
                            listInd=listInd+"<li data-target='homeCarousel' data-slide-to='"+index+"'></li>";
                            listStr="<div class='item' > <img src='" +
                                img +
                                "' alt='" +index+
                                "a tu' style='height: 100%;margin-right: auto;margin-left: auto;' > </div>"+listStr;
                        }
                    })
                    console.log("--2-->"+listStr);
                    $("#bannerlist").html(listStr);
                    $("#bannerlist_indicators").html(listInd);
                }
            });
        });
    </script>
</html>
